<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            //初始省的参数
            loadArea(0,"s1");

            //当省变化时 加载市
            $("#s1").change(function () {

                //清空市
                $("#s2").empty();
                $("#s2").append("<option value=''>--请选择市--</option>");

                // 清空区县
                $("#s3").empty();
                $("#s3").append("<option value=''>--请选择区县--</option>");

                var code = $(this).val();
                loadArea(code,"s2");

            });

            //当市变化时 加载区县
            $("#s2").change(function () {

                // 清空区县
                $("#s3").empty();
                $("#s3").append("<option value=''>--请选择区县--</option>");

                var code = $(this).val();
                loadArea(code,"s3");

            });

            //首选加载省
            function loadArea(pid,sid) {

                $.post("getCityServlet",{pid:pid},function (data) {

                    $(data).each(function () {

                        var cityName = this.cityName;
                        var codeid = this.codeid;

                        var option =  $("<option value='"+codeid+"'>"+cityName+"</option>");

                        $("#"+sid).append(option);

                    });
                });
            }
        });
    </script>
</head>
<body>

<select id="s1">
    <option value="">---请选择省---</option>
</select>
<select id="s2">
    <option value="">---请选择市---</option>
</select>
<select id="s3">
    <option value="">---请选择县---</option>
</select>

</body>
</html>